<template>
	<div class="loginav">
		<div class="loginbox boxall">
			<div class="logo">安全环保隐患信息举报系统</div>
			<div class="logintit"><span>用户登录</span></div>
			<a-form ref="loginForm" :model="ruleForm" :rules="rules">
			<ul class="logininput">
				<li>
					<i><img src="/logincss/picture/icon1.png"></i>
					<a-input class="forminput" v-model:value="ruleForm.account" value="" type="text" placeholder="用户名"/>
				</li>
				<li>
					<i><img src="/logincss/picture/icon2.png"></i>
					<a-input class="forminput" v-model:value="ruleForm.password" type="password" value="" placeholder="密码"/>
				</li>
				<li>
					<i><img src="/logincss/picture/icon3.png"></i>
					<a-input class="forminput" v-model:value="ruleForm.validCode" type="text" value="" placeholder="验证码" style="width: calc(100% - 150px)"/>
					<img :src="validCodeBase64" class="yzmimg" @click="loginCaptcha" />
				</li>


				<li>
					<a href="#" @click="login" class="btn btnblock btn-lg btn-block btn-primary">登录</a>
				</li>
				<li>
					<div class=" flex1 forget">
						<label> <input type="checkbox" checked class="aui-checkbox">&nbsp;记住密码</label>
<!--						<a href="忘记密码1.html" class="text-primary"> 忘记密码？</a>-->
					</div>
				</li>
			</ul>
			</a-form>
			<div class="boxfoot"></div>
		</div>
	</div>
	<div class="copyright">
		Copyright 四川星捷科技公司版权所有 2025
	</div>
</template>

<script>
	import loginApi from '@/api/auth/loginApi'
	import { required } from '@/utils/formRules'
	import smCrypto from '@/utils/smCrypto'
	import { afterLogin } from './util'
	export default {
		name: 'Login',
		components: {
			//phoneLoginForm,
			//threeLogin
		},
		data() {
			return {
				activeKey: 'userAccount',
				validCodeBase64: '',
				ruleForm: {
					account: '',
					password: '',
					validCode: '',
					validCodeReqNo: '',
					autologin: false
				},
				rules: {
					account: [required(this.$t('login.accountError'), 'blur')],
					password: [required(this.$t('login.PWError'), 'blur')]
				},
				loading: false,
				lang: [
					{
						name: '简体中文',
						value: 'zh-cn'
					},
					{
						name: 'English',
						value: 'en'
					}
				]
			}
		},
		computed: {
		},
		mounted() {
			// 加载验证码
			this.loginCaptcha()
		},

		created() {
		},
		methods: {

			// 获取验证码
			loginCaptcha() {
				loginApi.getPicCaptcha().then((data) => {
					this.validCodeBase64 = data.validCodeBase64
					this.ruleForm.validCodeReqNo = data.validCodeReqNo
				})
			},


			// 用户名密码登录
			async login() {
				this.$refs.loginForm.validate().then(async () => {
					this.loading = true
					const loginData = {
						account: this.ruleForm.account,
						// 密码进行SM2加密，传输过程中看到的只有密文，后端存储使用hash
						password: smCrypto.doSm2Encrypt(this.ruleForm.password),
						validCode: this.ruleForm.validCode,
						validCodeReqNo: this.ruleForm.validCodeReqNo
					}
					// 获取token
					try {
						const loginToken = await loginApi.login(loginData)
						afterLogin(loginToken)
					} catch (err) {
						this.loading = false
						this.loginCaptcha()
					}
				})
			},
			configLang(key) {
				this.config.lang = key
			}
		}
	}
</script>

<style src="/public/logincss/css/style.css" type="text/css"/>
